/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useState, useEffect } from 'react';
import { message, Button, Popconfirm, Typography } from 'antd';
import DragTable from '@/components/DragTable';
import ProTable from '@ant-design/pro-table';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import KbAddCustomersModal from './compinents/KbAddCustomersModal';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import type { ConnectState } from '@/models/connect';
import type { WHITELIST_COLUMNS } from '../index.d';
import { getWhiteList, removeWhiteList } from '@/services/yz/whitelist';
import yzWhiteListColumns from '@/components/_pages/yz/index.config';
import { useSelector } from 'umi';
import styles from './index.less';

const { Paragraph } = Typography;
const Index = ({ show }: { show: boolean }) => {
  const actionRef = useRef<ActionType>();
  const [visible, setVisible] = useState<boolean>(false);
  const { winSize } = useSelector((state: ConnectState) => state.global);
  const [queryData, setQueryData] = useState<{ [name: string]: string }>();

  const onClose = () => {
    setVisible(false);
  };
  const handelAddCustomers = () => setVisible(true);

  const handleRemove = async (record_: WHITELIST_COLUMNS) => {
    const { id } = record_;
    const { code, msg } = await removeWhiteList({ id });
    if (code == 0) {
      message.success(msg);
      actionRef.current?.reload();
    } else {
      message.error(msg);
    }
  };

  const optionColumns: ProColumns<WHITELIST_COLUMNS>[] = [
    {
      title: '操作',
      valueType: 'option',
      width: winSize === 'xs' ? 50 : 80,
      align: 'center',
      fixed: 'right',
      render: (_, record) => {
        return (
          <Popconfirm title='你确定移除白名单？' onConfirm={handleRemove.bind(null, record)}>
            <a>移除</a>
          </Popconfirm>
        );
      },
    },
  ];
  const queryTable = async (values: any) => {
    const { current: page, pageSize: page_size } = values;
    const { code, data, msg } = await getWhiteList({ page, page_size, ...queryData });
    if (code == 0) {
      return {
        data: data.list,
        total: data.total,
      };
    } else {
      message.error(msg);
      return {};
    }
  };
  const onSubmit = async (values: { [name: string]: string }) => {
    console.log(values);
    setQueryData(values);
    actionRef.current?.reload();
  };
  useEffect(() => {
    if (show) actionRef.current?.reload();
  }, [show]);
  return (
    <div className={styles.main}>
      <ProForm
        onFinish={onSubmit}
        layout='inline'
        submitter={{
          searchConfig: {
            resetText: '重置',
            submitText: '搜索',
          },
          render: (_, dom) => [
            ...dom.reverse(),
            <Paragraph type='secondary'>
              注：添加白名单后，用户在驿站网页版出入库数据下载的报表数据，客户手机号为明文手机号
            </Paragraph>,
            <Button type='primary' onClick={handelAddCustomers}>
              添加白名单
            </Button>,
          ],
        }}
      >
        <ProFormText name='keyword' width={240} placeholder='请输入驿站账号搜索' />
      </ProForm>
      <DragTable>
        <ProTable
          rowKey='id'
          actionRef={actionRef}
          request={queryTable}
          columns={[...yzWhiteListColumns, ...optionColumns]}
          toolBarRender={false}
          pagination={{
            pageSize: 20,
            showQuickJumper: false,
            showSizeChanger: false,
          }}
          search={false}
          scroll={{
            x: 1200,
          }}
        />
        <KbAddCustomersModal visible={visible} onClose={onClose} actionRef={actionRef} />
      </DragTable>
    </div>
  );
};

export default Index;
